<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="hAdd(1,'0')">添加权限</el-button>
        </div>
        <el-table
          border
          :data="permList"
          row-key="id"
        >
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button v-if="row.type === 1" type="text" @click="hAdd(2,row.id)">添加</el-button>
              <el-button type="text" @click="hEdit(row.id)">编辑</el-button>
              <el-button type="text" @click="hDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 放置一个弹层 用来编辑新增节点 -->
    <el-dialog :title="isEdit ? '编辑弹层' : '添加弹层'" :visible.sync="showDialog" :close-on-press-escape="false" :close-on-click-modal="false">
      <permission-dialog v-if="showDialog" :pid="pid" :type="type" :is-edit="isEdit" :origin-list="originList" :current-id="currentId" @successChange="hSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import { delPermission, getPermissions } from '@/api/permissions'
import { transListToTreeData } from '@/utils'
import PermissionDialog from '@/views/permission/permissionDialog.vue'
export default {
  name: 'Permission',
  components: { PermissionDialog },
  data() {
    return {
      permList: [],
      showDialog: false,
      type: '',
      pid: '',
      isEdit: false, // true表示编辑，false表示添加
      currentId: 0,
      originList: [] // 源数据，做code和name校验用的
    }
  },
  created() {
    this.loadGetPermList()
  },
  methods: {
  //  获取所有权限点
    async loadGetPermList() {
      const { data } = await getPermissions()
      this.permList = transListToTreeData(data, 0)
      // console.log(this.permList)
      // 利用循环把拿到的数组对象，拆出只包含id，pid，name，code的数组对象,做校验用
      this.originList = data.map(({ id, name, pid, code }) => ({ id, name, pid, code }))
      // console.log(this.originList)
    },
    // 点击添加权限
    hAdd(type, pid) {
      this.isEdit = false
      this.showDialog = true
      this.type = type
      this.pid = pid
      this.currentId = pid
    },
    // 点击删除按钮
    async hDel(id) {
      try {
        // 提示用户是否删除
        await this.$confirm('您确认要删除吗?', '提示', { type: 'warning' })
        // 发请求
        const res = await delPermission(id)
        //  提醒用户
        this.$message.success(res.message)
        //  从新渲染页面
        this.loadGetPermList()
      } catch (e) {
        if (e === 'cancel') return
        this.$message.error(e.message)
      }
    },
    // 点击编辑
    hEdit(id) {
      this.isEdit = true
      this.currentId = id
      this.showDialog = true
    },

    // 子组件成功之后，需要在父组件来关闭dialog和从新渲染页面
    hSuccess() {
      this.showDialog = false
      this.loadGetPermList()
    }

  }

}
</script>

<style lang="scss" scoped>

</style>
